import { DesktopOutlined, FileOutlined, PieChartOutlined, TeamOutlined, UserOutlined } from '@ant-design/icons';
import type { MenuProps } from 'antd';
import { Breadcrumb, Layout, Menu } from 'antd';
import React, { useState, useEffect } from 'react';

import { HashRouter as Router, Route, Switch } from "react-router-dom"
import Order1 from "./Order1";
import Order2 from "./Order2";
import productname from "./productname"
import productcolor from "./productcolor"
import productdirection from './productdirection';
import productlight from './productlight';
import Order from './Order';

const { Header, Content, Footer, Sider } = Layout;

type MenuItem = Required<MenuProps>['items'][number];

function getItem(label: React.ReactNode, key: React.Key, icon?: React.ReactNode, children?: MenuItem[],): MenuItem {
    return { key, icon, children, label, } as MenuItem;
}

const items: MenuItem[] = [
    getItem(`甲方管理`, '/main/order1', <PieChartOutlined />),
    getItem('乙方管理', '/main/order2', <DesktopOutlined />),
    getItem('产品名称管理', "/main/productname", <FileOutlined />),
    getItem('产品颜色管理', "/main/productcolor", <FileOutlined />),
    getItem('产品方向管理', "/main/productdirection", <FileOutlined />),
    getItem('产品光源管理', "/main/productlight", <FileOutlined />),
    getItem('新增订单', "/main/order", <FileOutlined />),


];


const Main: React.FC = (props: any) => {

    const [menuList, setmenuList] = useState<any>([
        { id: "1", msg: "甲方管理", component: Order1, path: "/main/order1" },
        { id: "2", msg: "乙方管理", component: Order2, path: "/main/order2" },
        { id: "3", msg: "产品名称", component: productname, path: "/main/productname" },
        { id: "4", msg: "产品颜色", component: productcolor, path: "/main/productcolor" },
        { id: "5", msg: "产品方向管理", component: productdirection, path: "/main/productdirection" },
        { id: "6", msg: "产品光源管理", component: productlight, path: "/main/productlight" },
        { id: "7", msg: "新增订单", component: Order, path: "/main/order" }
    ]);
    const [selectedKeys, setselectedKeys] = useState<Array<string>>(["/main/order1"]);

    let showContent = (info: any) => {
        let { key } = info;
        props.history.push(key);
        setselectedKeys([key]);
    }

    useEffect(() => {

        setselectedKeys([props.location.pathname]);

    }, [])



    const [collapsed, setCollapsed] = useState(false);

    return (
        <Layout style={{ minHeight: '100vh' }}>
            <Sider collapsible collapsed={collapsed} onCollapse={value => setCollapsed(value)}>
                <div className="logo" />
                <Menu theme="dark" selectedKeys={selectedKeys} mode="inline" items={items} onClick={showContent} />
            </Sider>
            <Layout className="site-layout">
                <Header className="site-layout-background" style={{ padding: 0 }} />
                <Content style={{ margin: '0 16px' }}>

                    <div className="site-layout-background" style={{ padding: 24, minHeight: 360 }}>

                        <Router>
                            <Switch>
                                {menuList.map((item: any) => {
                                    return (<Route path={item.path} component={item.component} exact={item.exact} key={item}></Route>)
                                })}
                            </Switch>
                        </Router>

                    </div>
                </Content>
                <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
            </Layout>
        </Layout>
    );
};

export default Main;